import React, { lazy, Suspense } from 'react'
import { Route, Routes, BrowserRouter } from 'react-router-dom'
import './App.scss'
const Login = lazy(() => import('./views/Login/Login'))
const Admin = lazy(() => import('./views/Admin/Admin'))
const Tables = lazy(() => import('./views/Tables/Tables'))
const About = lazy(() => import('./views/About/About'))
const Echarts = lazy(() => import('./views/Echarts/Echarts'))
const Button = lazy(() => import('./views/Button/Button'))
const Texts = lazy(() => import('./views/Texts/Texts'))
import { useStor } from './store/index'
function LazyComponent(props) {
  return <props.content />
}
export default function App() {
  const { userStroe } = useStor();
  const permissions = userStroe.user.permissions;
  const routes = [];
  const parsePermission = (ps, parentPath = "") => {
    ps.forEach((p) => {
      if (p.children) {
        parsePermission(p.children, parentPath + p.path);
      } else {
        routes.push({
          path: "/" + p.path.slice(1),
          element: p.element,
        });
      }
    });
  };
  parsePermission(permissions);
  return (
    <div className='app'>
      <BrowserRouter>
        <Suspense>
          <Routes>
            <Route path='/' element={<Admin />}>
              {routes.map((route) => (
                <Route
                  key={route.path}
                  path={route.path}
                  element={
                    <LazyComponent
                      content={lazy(() => import(route.element + ""))}
                    />
                  }
                />
              ))}



              {/* <Route path='/tables' element={<Tables />}></Route>
              <Route path='/abouts' element={<About />}></Route>
              <Route path='/buttons' element={<Button />}></Route>
              <Route path='/texts' element={<Texts />}></Route>
              <Route path='/' element={<Echarts />}></Route> */}
            </Route>
            <Route path='/login' element={<Login />}></Route>
          </Routes>
        </Suspense>
      </BrowserRouter>
    </div>
  )
}